<template>
  <AppTitle title="店铺信息">
    <div class="shop-info" @click="saveShopInfo">保存店铺信息</div>
  </AppTitle>
 <div class="form">
  <el-form :model="shopForm" label-width="auto">
    <!-- 店铺名称 -->
    <el-form-item label="店铺名称">
      <el-input v-model="shopForm.name" />
    </el-form-item>
    <!-- 店铺公告 -->
    <el-form-item label="店铺公告">
      <el-input v-model="shopForm.bulletin" type="textarea" rows="5" />
    </el-form-item>
    <!-- 店铺头像 -->
    <el-form-item label="店铺头像">
      <el-upload
    class="avatar-uploader"
    :action="'/api'+'/shop/upload'"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="shopForm.avatar" :src="serverUrl+shopForm.avatar" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    <!-- 店铺图片 -->
    <el-form-item label="店铺图片">
      <el-upload
    v-model:file-list="fileList "
    :action="'/api'+'/shop/upload'"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="崩啦" />
  </el-dialog>
    </el-form-item>
    <!-- 起送价格 -->
    <el-form-item label="起送价格" >
      <el-input v-model="shopForm.minPrice" type="number" />
    </el-form-item>
    <!-- 配送费 -->
    <el-form-item label="配送费">
      <el-input v-model="shopForm.deliveryPrice" type="number" />
    </el-form-item>
    <!-- 送达时间 -->
    <el-form-item label="送达时间">
      <el-input v-model="shopForm.deliveryTime" type="number" />
    </el-form-item>
     <!-- 店铺描述 -->
     <el-form-item label="店铺描述">
      <el-input v-model="shopForm.description" />
    </el-form-item>
    <!-- 店铺好评率 -->
    <el-form-item label="店铺好评率">
      <el-input v-model="shopForm.score" type="number" />
    </el-form-item>
    <!-- 店铺销量 -->
    <el-form-item label="店铺销量">
      <el-input v-model="shopForm.sellCount" type="number" />
    </el-form-item>
    <!-- 活动支持 -->
    <el-form-item label="活动支持">
      <el-checkbox-group v-model="shopForm.supports">
          <el-checkbox value="单人精彩套餐" name="type">
            单人精彩套餐
          </el-checkbox>
          <el-checkbox value="VC无限橙果汁全场8折" name="type">
            VC无限橙果汁全场8折
          </el-checkbox>
          <el-checkbox value="在线支付满28减5" name="type">
            在线支付满28减5
          </el-checkbox>
          <el-checkbox value="特价饮品八折抢购" name="type">
            特价饮品八折抢购
          </el-checkbox>
          <el-checkbox value="中秋特惠" name="type">
            中秋特惠
          </el-checkbox>
          <el-checkbox value="国庆特价" name="type">
            国庆特价
          </el-checkbox> 
           <el-checkbox value="春节1折折扣" name="type">
            春节1折折扣
          </el-checkbox>
        </el-checkbox-group>
    </el-form-item>
    <!-- 营业时间 -->
    <el-form-item label="营业时间" style="width: 500px;">
      <el-time-picker
      v-model="shopForm.date"
      is-range
      range-separator="至"
      start-placeholder="开店时间"
      end-placeholder="关店时间"
    />
    </el-form-item>
  </el-form>
 </div>
</template>

<script setup>
import AppTitle from '../../components/AppTitle.vue';
import { ref, onMounted } from 'vue';
import { shopInfo,shopEdit } from '@/api/shop';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { serverUrl } from '@/utils/common';
import {pathDeal} from '@/utils/way';
const fileList = ref([]);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const checkedActive = ref(false);
const shopForm = ref({
  id: '',
  name: '',
  bulletin: '',
  avatar: '',
  deliveryPrice: '',
  deliveryTime: '',
  description: '',
  score: '',
  sellCount: '',
  supports: '',
  pics: '',
  date: '',
  minPrice: '',
});

const getShopInfo = async () => {
    const res = await shopInfo();
    shopForm.value = res.data;
    fileList.value = res.data.pics.map((item) => {
      return {
        url: serverUrl + item,
      };
    });
    
    // shopForm.value = {...shopForm.value, ...res.data };
};
  getShopInfo(); 

// 头像
const beforeAvatarUpload = (file) => {
    if(!file.type.includes('image')){
      ElMessage.error('文件类型不是图片');
      return false;
    }
    if(file.size >2*1024*1024){
      ElMessage.error('文件大小不能超过 2M');
      return false;
    }
  return true ;  
}
const handleAvatarSuccess = (response) => {
    // 假设服务器返回的响应中有一个字段是图片的 URL
    if (response && response.imgUrl) {
      shopForm.value.avatar =response.imgUrl;
    }
    ElMessage.success('图片上传成功');
};
// 店铺图片
const handlePictureCardPreview = (file) => {
  // 处理图片预览逻辑
  dialogImageUrl.value = file.url;
  dialogVisible.value = true
};

// const handleRemove = (file) => {
//   // 处理图片移除逻辑
//   console.log('图片已移除', file);
// };

// 保存店铺
const saveShopInfo = async () => {
  const form = {...shopForm.value};
  const pics = fileList.value.map((item) => {
    if (item.response) {
      item.url = item.response.imgUrl;
    }else{
      item.url = item.url
    }
    return pathDeal(item.url);
  });
  form.pics = JSON.stringify(pics);
  form.supports = JSON.stringify(form.supports);
  form.date = JSON.stringify(form.date);
  form.avatar = pathDeal(form.avatar);
  let res = await shopEdit(form);
  if(res.code == 0){
    getShopInfo();
    ElMessage.success('保存成功');
  }else{
    ElMessage.error('保存失败')
  }
}
</script>

<style lang="scss" scoped>
.shop-info{
  width: 84px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  padding: 12px 20px;
  border: 1px solid #e0e0e0;
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  margin-top: 6px;
  cursor: pointer;
  border-radius: 4px;
  
}
.shop-info:hover{
  color: #fff;
    border-color: #66b1ff;
    background-color: #66b1ff;
}
.form{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
}
:deep(.el-form){
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
}
// 头像
:deep(.el-upload:nth-child(1)){
  width: 178px;
  height: 178px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.avatar {
  width: 178px;
  height: 178px;
}
// 店铺图片
:deep(.el-dialog){
width: 500px;
height: 500px;
text-align: center;
img{
  width: 400px;
  height: 400px;
  margin-top: 20px;
}
}
:deep(.el-upload-list--picture-card .el-upload-list__item){
  width: 178px;
  height: 178px;
}
</style>